<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.red1 input{
			background: red;
		}
		.red2 input{
			background: rgb(200,200,0);
		}
		.red3 input{
			background: rgb(200,0,0);
		}
		.red4 input{
			background: rgb(80,200,0);
		}
		.red{
			color:red;
		}
		#wrap{
			width: 400px;
			height: 400px;
			border:2px solid black;
		}
		.in{
			width: 400px;
			height: 200px;
			background: red;
		}
		#box{
			width: 400px;
			height: 400px;
			border:2px solid black;
		}
	</style>

</head>
<body>
	<div id="box">djfirjgkfdjvuie</div>
	<div class="text">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>

	<ul id="content">
		<li>哈哈</li>
		<li>哈喽</li>
		<li>嘻嘻</li>
	</ul>
	<p>nihaoma</p>

	<input type="text" class="a">
	<input type="text" class="a">
	<input type="text" class="a">
	<input type="text" class="a">

		<a href="">哈哈</a>

		<p>你好呐</p>
		<p>你好呐</p>
		<p>你好呐</p>
		<p>你好呐</p>
		<p>你好呐</p>

		<div id="wrap">
			<div class="in"></div>
				<button>移除</button><button>添加</button>
			
		</div>
	
</body>
</html>
<script src="../jquery-3.3.1.min.js">
	
</script>
<script>
	// $("#box").append("aaa");
    // $("#box").append(document.getElementById("content")).css("border","2px solid red");
    /*var arr = ["yellow","red","blue"];
    $("ul>li").append(function(index,html){
    	console.log(html);
    	// return index + 1;
    	return arr[index];


    });*/
    // console.log($("#box").append($("#content")));

    // console.log($("#content").appendTo($("#box")));

    // $("p").after("帅哥");
    // $("p").after("haha");

    // insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。
    //在每个 box元素之后插入 p 元素：
    $("p").insertAfter($("#box"));
  
  //wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
  //在 <div> 元素中包裹每个input：
    $("input.a").wrap("<div></div>");

    $("input.a").wrap(function(index){
    	return '<div class="red' + (index + 1) + '"></div>'
    }).click(function(){
       $(this).unwrap();
    });

  // wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
  //$("#box,#content").wrapAll("<div style=\"border:5px solid red;\"></div>");

  //wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
  $("p").wrapInner("<span class='red'></span>");

//replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。
//replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。
  //$("a").replaceWith($("#box"));
// $("p").replaceWith("<strong>轻装</strong>");

// $("<div>我是div</div>").replaceAll("p");

// $("p").empty()


 
var inDiv = $(".in").click(function(){
	inDiv.remove();
	// inDiv.detach;
	inDiv.detach();
});
 inDiv.a = 5;
$("#wrap button:eq(1)").click(function(){
	$("#wrap").prepend(inDiv);
});
$(".text").click(function() {
        console.log("6666");
   });

   // $(".text").appendTo($("#box"));
   $(".text").clone(true).appendTo($("#box"));







</script>